<template>
  <div class="app-container">
    <el-form
      ref="form"
      class="edit-form"
      :rules="rules"
      :model="form"
      label-width="200px"
    >
      <el-form-item label="店铺编码" prop="shopCode">
        <el-input
          v-model="form.shopCode"
          placeholder="请输入店铺编码"
        ></el-input>
      </el-form-item>


      <el-form-item label="来源渠道" prop="channel" >
            <el-select v-model="form.channel"  :disabled="true">
                        <el-option
                      v-for="item in channelList"
                      
                      :key="item.value"
                      :label="item.name"
                      :value="item.code">
                </el-option>
              </el-select>
      </el-form-item>


          <el-form-item label="商标品牌" prop="brandId" >
                   <el-select  v-model="form.brandId" filterable  placeholder="请选择商标">
                      <el-option
                          v-for="item in brandList"
                          :key="item.value"
                          :label="item.brandName"
                          :value="item.id">
                    </el-option>
                  </el-select>
          </el-form-item>
          <el-form-item label="poid" prop="poId"  v-if="shopType == 'DY'">
           <el-input
              v-model="form.poId"
               placeholder="请输入poid"
            ></el-input>
          </el-form-item>
      <el-form-item label="开发者ID" prop="developerId" v-if="shopType == 'MT' ">
        <el-input
          v-model="form.developerId"
          placeholder="请输入开发者ID"
        ></el-input>
      </el-form-item>

      <el-form-item label="店铺名称" prop="shopName"  >
        <el-input
          v-model="form.shopName"
          placeholder="请输入店铺名称"
        ></el-input>
      </el-form-item>

      <el-form-item label="opBizCode" prop="opBizCode" v-if="shopType == 'MT'">
        <el-input
          v-model="form.opBizCode"
          placeholder="请输入opBizCode"
        ></el-input>
      </el-form-item>

      <el-form-item label="店铺电话" prop="phone">
        <el-input v-model="form.phone" placeholder="请输入店铺电话"></el-input>
      </el-form-item>

      <el-form-item label="所属区域" prop="city">
        <el-cascader
          style="width: 100%"
          size="large"
          :options="options"
          v-model="selectedOptions"
          @change="handleChange"
        >
        </el-cascader>
      </el-form-item>

      <el-form-item label="详细地址" prop="address">
        <el-input
          type="textarea"
          v-model="form.address"
          placeholder="请输入详细地址"
        ></el-input>
      </el-form-item>

     
      <el-form-item label="店铺备注">
        <el-input
          type="textarea"
          v-model="form.remark"
          placeholder="请输入店铺备注"
        ></el-input>
      </el-form-item>

      <el-form-item
        label="店铺图片"
        prop="picture"
        :rules="[
          { required: true, message: '请上传店铺图片', trigger: 'change' },
        ]"
      >
        <el-upload
          :action="`${BASE_URL}/common/images/upload`"
          accept="image/jpeg,image/jpg,image/png"
          multiple
          list-type="picture-card"
          :file-list="pictureList"
          :on-remove="handleUploadChange"
          :on-change="handleUploadChange"
          :before-upload="beforeAvatarUpload"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">{{
          form.id ? "保存修改" : "立即创建"
        }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getShopDetail, addOrEditShop } from "@/api/shop/index";
import { getChannel } from "@/api/common/index";
import { listBrand } from "@/api/brand/index";
import { regionData } from "element-china-area-data";
import { BASE_URL, IMAGE_OSS_URL } from "@/config/index";
import { codeToText } from "element-china-area-data";

export default {
  data() {
    return {
      BASE_URL,
      IMAGE_OSS_URL,
      loading:false,
      brandId:{},
      shopType:"",
      form: {
        shopName: "",
        brandId:"",
        channel:"",
        phone: "",
        city: [],
        provinces: "",
        country: "",
        address: "",
        remark: "",
        picture: "",
        shopCode: "",
        developerId: "",
        opBizCode: "",
        washShop: "",
      },
      channelList:[],
      brandList:[],
      pictureList: [],
      selectedOptions: [],
      options: regionData,
      rules: {
        address: [
          { required: true, message: "请输入详细地址", trigger: "blur" },
        ],

         brandId: [
          { required: true, message: "请输入详细地址", trigger: "blur" },
        ],

         poId: [
          { required: true, message: "请输入店铺id", trigger: "blur" },
        ],
         channel: [
          { required: true, message: "请输入渠道", trigger: "blur" },
        ],
        shopName: [
          { required: true, message: "请输入店铺名称", trigger: "blur" },
        ],
        shopCode: [
          { required: true, message: "请输入店铺编码", trigger: "blur" },
        ],
        opBizCode: [
          { required: true, message: "请输入opBizCode", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入店铺电话", trigger: "blur" },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
        city: [
          { required: true, message: "请选择所属区域", trigger: "change" },
        ],
      },
    };
  },
  created() {
    let shopType=this.$route.query.shopType
    
    if(shopType == 'MT' || shopType == 'DY'){
         if(shopType == 'MT' ){
            this.rules.poId=[]
         }
        if(shopType == 'DY' ){
         this.rules.opBizCode=[]
         this.rules.developerId=[]
         }
    }else{
       this.$message({ message: '请求参数不合法！', type: 'error' })
        return
    }
    this.form.channel=shopType 
    if (this.$route.query.id) {
      this.getDetail();
       
    }
    this.shopType=shopType
  },
  mounted() {
    getChannel().then(res=>{
        this.channelList=res.data
      })

      listBrand({platformType:this.form.channel}).then(res=>{
         this.brandList=res.data.records
      })
      

  },
  methods: {
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 10;

      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 10MB!");
      }
      return isLt2M;
    },
    handleUploadChange(file, fileList) {
      this.pictureList = fileList;
      this.form.picture = fileList.map((item) => item.url).join(",");
    },
    handleChange() {
      this.form.provinces = this.selectedOptions[0];
      this.form.city = this.selectedOptions[1];
      this.form.country = this.selectedOptions[2];
    },
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true;
          addOrEditShop({
            ...this.form,
            cityName: codeToText[this.form.city],
            provincesName: codeToText[this.form.provinces],
            countryName: codeToText[this.form.country],
            picture: this.pictureList
              .map((item) => item.response.data)
              .join(","),
          })
            .then((res) => {
              this.loading = false;
              this.$message.success("操作成功");
              if(this.shopType=="DY"){
                this.$router.push("/shop/shop_dy");
              }
              if(this.shopType=="MT"){
                this.$router.push("/shop/list");
              }
              
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          return false;
        }
      });
    },
    getDetail() {
      getShopDetail(this.$route.query.id).then((res) => {
        this.form = res.data;
        this.pictureList = this.form.picture.split(",").map((item) => ({
          url: IMAGE_OSS_URL + item,
          status: "success",
          response: {
            data: item,
          },
        }));
        this.selectedOptions = [
          this.form.provinces,
          this.form.city,
          this.form.country,
         
        ];
      });
    },
  },
};
</script>
